<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图片懒加载_jquery-lazyload</title>
  <style>
    img {
      width: 765px;
      height: 574px;
    }
  </style>
</head>

<body>
  <img class="lazy" data-original="img/bmw_m1_hood.jpg">
  <img class="lazy" data-original="img/bmw_m1_side.jpg">
  <img class="lazy" data-original="img/viper_1.jpg">
  <img class="lazy" data-original="img/viper_corner.jpg">
  <img class="lazy" data-original="img/bmw_m3_gt.jpg">
  <img class="lazy" data-original="img/corvette_pitstop.jpg">
  <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>
  <script>
    $(function () {
      $("img.lazy").lazyload({
        effect: "fadeIn"
      });
    });
  </script>
</body>

</html>